* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: #1414;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hamburger {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px 14px 14px;
  border: 8px solid #002b5b;
  border-radius: 100vw;
}

.hamburger input {
  display: none;
}

.hamburger svg {
  height: 5rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: #002b5b;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked + svg {
  transform: rotate(-45deg);
}

.hamburger input:checked + svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}